<template>
  <div :id="containerId" />
</template>

<script>
/**
 * 官方demo，需要在public/index.html引入jQuery和datafeed
 */

// import UDFCompatibleDatafeed from '@/lib/my_datafeed/my_datafeed'
export default {
  name: 'TVChartContainer',
  props: {
    symbol: {
      // default: 'AAPL',
      default: '',
      type: String,
    },
    interval: {
      default: 'D',
      type: String,
    },
    containerId: {
      default: 'tv_chart_container',
      type: String,
    },
    datafeedUrl: {
      default: 'https://demo_feed.tradingview.com',
      // default: '',
      type: String,
    },
    libraryPath: {
      default: './charting_library/',
      type: String,
    },
    chartsStorageUrl: {
      // default: 'https://saveload.tradingview.com',
      default: '',
      type: String,
    },
    chartsStorageApiVersion: {
      default: '1.1',
      type: String,
    },
    // clientId: {
    //   default: 'tradingview.com',
    //   type: String
    // },
    // userId: {
    //   default: 'public_user_id',
    //   type: String
    // },
    fullscreen: {
      default: false,
      type: Boolean,
    },
    autosize: {
      default: true,
      type: Boolean,
    },
    studiesOverrides: {
      type: Object,
    },
  },
  tvWidget: null,
  mounted() {
    this.initTV()
  },
  methods: {
    initTV() {
      // console.log('init', this.symbol, this.interval)
      const locale = 'zh'
      const widgetOptions = {
        // debug: true,
        // symbol: this.symbol,
        symbol: 'AAPL',
        // BEWARE: no trailing slash is expected in feed URL
        datafeed: new window.Datafeeds.UDFCompatibleDatafeed(this.datafeedUrl),
        // datafeed: new UDFCompatibleDatafeed(this.datafeedUrl || this.tvHostUrl),
        interval: this.interval,
        container_id: this.containerId,
        library_path: this.libraryPath,

        locale,
        // enabled_features: ['study_templates'],
        // charts_storage_url: this.chartsStorageUrl,
        // charts_storage_api_version: this.chartsStorageApiVersion,
        // client_id: this.clientId,
        // user_id: this.userId,
        fullscreen: this.fullscreen,
        autosize: this.autosize,
        // studies_overrides: this.studiesOverrides,
        timezone: 'Asia/Hong_Kong',
        theme: 'Dark', // 默认主题是Light
        // custom_css_url: './tv-css.css', // css覆盖
        disabled_features: [
          // 在默认情况下禁用的功能
          'use_localstorage_for_settings',
          'edit_buttons_in_legend',
          'timeframes_toolbar',
          'go_to_date',
          'volume_force_overlay',
          'header_symbol_search',
          'header_undo_redo',
          'caption_button_text_if_possible',
          // 'header_resolutions',
          'header_interval_dialog_button',
          'show_interval_dialog_on_key_press',
          'header_compare',
          'header_screenshot',
          'header_saveload',
        ],
      }

      const tvWidget = new window.TradingView.widget(widgetOptions)
      this.tvWidget = tvWidget

      tvWidget.onChartReady(() => {
        // 现在可以调用其他widget的方法了
        const tvChart = tvWidget.activeChart()

        // tvChart.createStudy('MACD', true, false, [14, 30, 'close', 9])
        tvChart.createStudy('Moving Average', false, false, [5], null, {
          'Plot.color': '#FF0000',
        })

        tvChart.createStudy('Moving Average', false, false, [10], null, {
          'Plot.color': '#FFA500',
        })
        tvChart.createStudy('Moving Average', false, false, [20], null, {
          'Plot.color': '#1E90FF',
        })
        tvChart.createStudy('Moving Average', false, false, [30], null, {
          'Plot.color': '#008000',
        })
        tvChart.createStudy('Moving Average', false, false, [60], null, {
          'Plot.color': '#9400D3',
        })
      })
    },
  },
  destroyed() {
    if (this.tvWidget !== null && this.tvWidget !== undefined) {
      this.tvWidget.remove()
      this.tvWidget = null
    }
  },
}
</script>
